<template>
	<view class="page">
		<custom-navigation :title="isEdit?'会员编辑':'新增会员'" rightTxt="保存" @rightAction="save">
		</custom-navigation>
		<scroll-view class="body-scroll" scroll-y="true">
			<!-- <view class="vip-hint">会员过期时间：2022-03-09</view> -->
			<view class="item-contianer flex-column">

				<view class="item flex-row-center">
					<view class="title">头像 </view>
					<view style="flex: 1;"></view>
					<image :src="head_images||'/static/camera_head.png'" class="camera-img" @click="addImage()">
					</image>
				</view>

				<view class="item flex-row-center">
					<view class="title">手机号 <text class="x">*</text> </view>
					<view class="input1 input-hint" v-if="vipinfo.member_phone">{{member_phone}}</view>
					<input placeholder="请输入手机号" v-if="vipinfo.member_phone==null" placeholder-class="input-hint"
						type="number" v-model="member_phone" :maxlength="11" />
				</view>
				<view class="item flex-row-center">
					<view class="title"> 姓名 <text class="x">*</text> </view>

					<input placeholder="请输入姓名" placeholder-class="input-hint" v-model="member_name" />
				</view>

				<view class="item flex-row-center">
					<view class="title">登录密码 <text class="x">*</text>  </view>

					<input placeholder="请输入" placeholder-class="input-hint" password type="text" v-model="pass_word" :password="false"
						:maxlength="16" />
				</view>

				<view class="item flex-row-center">
					<view class="title">确认密码 <text class="x">*</text>  </view>

					<input placeholder="请输入" placeholder-class="input-hint" password type="text" :password="false"
						v-model="confirm_pass_word" :maxlength="16" />
				</view>

				<picker :value="levelIndex" :range="levelList" @change="e=>levelIndex = e.detail.value">
					<view class="item flex-row-center">
						<view class="title">会员等级 <text class="x">*</text> </view>
						<view class="value">{{levelList[levelIndex]}}
							<image src="../../static/arrow-blackmin.png" mode="heightFix"></image>
						</view>
					</view>
				</picker>
				<picker :value="stateIndex" :range="stateList" @change="e=>stateIndex = e.detail.value">
					<view class="item flex-row-center">
						<view class="title">状态 </view>
						<view class="value">{{stateList[stateIndex]}}
							<image src="../../static/arrow-blackmin.png" mode="heightFix"></image>
						</view>
					</view>
				</picker>
				<picker :value="sexIndex" :range="sexList" @change="e=>sexIndex = e.detail.value">
					<view class="item flex-row-center">
						<view class="title">性别 </view>
						<view class="value">{{sexList[sexIndex]}}
							<image src="../../static/arrow-blackmin.png" mode="heightFix"></image>
						</view>
					</view>
				</picker>
				<picker mode="date" :date="birthday" @change="e=>birthday = e.detail.value" :end="endtime">
					<view class="item flex-row-center">
						<view class="title">生日 </view>
						<view class="value" :class="{color999:!birthday}"> {{birthday?birthday:'请选择生日日期'}}
							<image src="../../static/arrow-blackmin.png" mode="heightFix"></image>
						</view>
					</view>
				</picker>
				<view class="item flex-row-center">
					<view class="title">地址 </view>
					<input placeholder="请输入地址" placeholder-class="input-hint" v-model="address" />
				</view>

				<view class="item flex-row-center">
					<view class="title">备注 </view>
					<input placeholder="请输入备注" placeholder-class="input-hint" v-model="remarks" />
				</view>
				<picker :value="accountProtectIndex" :range="accountProtectList"
					@change="e=>accountProtectIndex = e.detail.value">
					<view class="item flex-row-center">
						<view class="title">账号保护 <image src="../../static/question.png" @click.stop="showDialog(3)"
								style="width: 36rpx; height: 36rpx;position: relative;top:7rpx;left:7rpx;"
								mode="scaleToFill"></image>
						</view>

						<view class="value" :class="{color999:accountProtectIndex==-1}">
							{{accountProtectIndex!=-1?accountProtectList[accountProtectIndex]:'请选择'}}
							<image src="../../static/arrow-blackmin.png" mode="heightFix"></image>
						</view>
					</view>
				</picker>
			</view>

			<picker></picker>
		</scroll-view>
		<!-- <view class="bottom-btn flex-column-center">
			<view class="btn" @click="save">保存</view>
		</view> -->
		<report-alert :title="dialogTitle" :message="dialogMessage" :show="dialogShow" @leftAction="dialogShow=false"></report-alert>
	</view>
</template>

<script>
	import dsBridge from 'dsbridge'
	export default {

		data() {
			return {
				showPassword:false,
				extensionShow: false,
				head_portrait: null,
				head_images: null,
				stateIndex: 0,
				stateList: ["生效", "禁用", "挂失"],
				sexIndex: 0,
				sexList: ["男", "女"],
				levelIndex: 0,
				levelList: ["普通会员", "金卡会员"],
				levels: [],
				accountProtectIndex: 0,
				accountProtectList: ["免密", "验证码验证"],
				address: '',
				birthday: '', //new Date().toISOString().slice(0, 10),
				endtime: new Date().toISOString().slice(0, 10),
				vipinfo: {},
				revipinfo: {},
				"store_no": "2",
				"store_name": "对接测试店铺",
				"be_overdue_state": "未过期",
				"recharge_amount": 0,
				"give_amount": 0,
				"balance": 0,
				"cumul_get_points": 0,
				"cumul_consumption_points": 0,
				"integral": 0,
				"consumption_amount": 0,
				"usable_recharge_amount": 0,
				"usable_gift_amount": 0,
				"member_state": "生效",
				"member_name": "",
				member_phone: '',
				"pass_word": "gmcc1234@",
				"confirm_pass_word": "gmcc1234@",
				"sex": "男",
				"member_level_no": "",
				"member_level": "",
				"account_protect": "",
				"remarks": "",
				isEdit: false,
				dialogShow: false,
			}

		},
		onLoad(options) {
			this.isEdit = options?.isEdit ?? false
			if (this.isEdit) {
				this.vipinfo = uni.getStorageSync("vip-info") || {};
				uni.setStorageSync("vip-info", null)
				if (this.vipinfo.member_phone != null) {
					this.revipinfo = this.vipinfo
					for (let i in this.stateList) {
						let item = this.stateList[i];
						if (item == this.vipinfo.member_state) {
							this.stateIndex = i
						}
					}
					for (let i in this.sexList) {
						let item = this.sexList[i];
						if (item == this.vipinfo.sex) {
							this.sexIndex = i
						}
					}
					for (let i in this.accountProtectList) {
						let item = this.accountProtectList[i];
						if (item == this.vipinfo.account_protect) {
							this.accountProtectIndex = i
						}
					}
					this.member_phone = this.vipinfo.member_phone
					this.member_name = this.vipinfo.member_name
					this.pass_word = this.vipinfo.pass_word
					this.confirm_pass_word = this.vipinfo.confirm_pass_word
					this.birthday = this.vipinfo.birthday
					this.remarks = this.vipinfo.remarks
					this.address = this.vipinfo.address
					if (this.vipinfo.head_portrait != null) {
						var token = dsBridge.call("getToken");
						if (token == '' || token == undefined) {
							token = uni.getStorageSync("token") ?? ''
						}
						this.head_images =
							`http://139.196.209.46:4882/file/download?fileNo=${this.vipinfo.head_portrait}&bx_auth_ticket=${token}`
						this.head_portrait = this.vipinfo.head_portrait
					}
				}

			}
			this.getLevels();
		},

		methods: {
			showDialog(type) {
				this.dialogShow = false
				this.dialogTitle = "账号保护"
				this.dialogMessage =
					"【免密】：使用会员余额消费无需输入密码即可结算成功。\n【验证码验证】：使用会员余额消费将给关联的会员发送支付验证码，操作员需输入验证码核销才可结算。"
				this.dialogShow = true
			},
			birthdaySelect(e) {

			},
			save() {
				let hint = null;
				if (this.member_phone.length == 0) {
					hint = "请输入手机号"
				}

				if (this.pass_word != this.confirm_pass_word) {
					hint = "两次输入的密码不一样！"
				}
				if (hint?.length > 0) {
					this.$showToast(hint)
					return;
				}


				let params = {
					// "store_no": "2",
					// "store_name": "对接测试店铺",
					// "be_overdue_state": "未过期",
					// "recharge_amount": 0,
					// "give_amount": 0,
					// "balance": 0,
					// "cumul_get_points": 0,
					// "cumul_consumption_points": 0,
					// "integral": 0,
					// "consumption_amount": 0,
					// "usable_recharge_amount": 0,
					// "usable_gift_amount": 0,
					"member_state": this.stateList[this.stateIndex],
					"member_name": this.member_name,
					"member_phone": this.member_phone + "",
					"pass_word": this.pass_word,
					"confirm_pass_word": this.confirm_pass_word,
					"sex": this.sexList[this.sexIndex],
					// "birthday": this.birthday,
					"member_level_no": this.levels[this.levelIndex].member_level_no,
					"member_level": this.levels[this.levelIndex].member_level_name,
					"account_protect": this.accountProtectList[this.accountProtectIndex],
					"address": this.address,
					"remarks": this.remarks
				};
				if(this.birthday){
					params.birthday = this.birthday;
				}

				if (this.revipinfo.id) {
					if (this.revipinfo.member_state == params.member_state)
						delete params.member_state
					if (this.revipinfo.member_name == params.member_name)
						delete params.member_name
					if (this.revipinfo.member_phone == params.member_phone)
						delete params.member_phone
					if (this.revipinfo.pass_word == params.pass_word)
						delete params.pass_word
					if (this.revipinfo.confirm_pass_word == params.confirm_pass_word)
						delete params.confirm_pass_word
					if (this.revipinfo.sex == params.sex)
						delete params.sex
					if (this.revipinfo.birthday == params.birthday)
						delete params.birthday
					if (this.revipinfo.member_level_no == params.member_level_no)
						delete params.member_level_no
					if (this.revipinfo.account_protect == params.account_protect)
						delete params.account_protect
					if (this.revipinfo.account_protect == params.account_protect)
						delete params.account_protect
					if (this.revipinfo.address == params.address)
						delete params.address
					if (this.revipinfo.remarks == params.remarks)
						delete params.remarks
				}
				if (this.head_portrait != null) {
					params.head_portrait = this.head_portrait
				}



				let url = this.vipinfo.id ? "/retail/operate/srvretail_member_info_update" :
					"/retail/operate/srvretail_member_custom_info_add"
				this.$apiPost(url, [{
					"serviceName": this.vipinfo.id ? "srvretail_member_info_update" :
						"srvretail_member_custom_info_add",
					"condition": this.vipinfo.id ? [{
						"colName": "id",
						"ruleType": "eq",
						"value": this.vipinfo.id
					}] : [],
					"data": [params]
				}]).then(res => {
					if (res.state == "SUCCESS") {
						uni.showToast({
							title: "成功！",
							mask: true
						})
						uni.setStorageSync("vipinfo", true)
						uni.setStorageSync("refresh", true)
						setTimeout(() => {
							uni.navigateBack()
							if(getCurrentPages().length==1)
								dsBridge.call("back")
						}, 2000)
					}

				})
			},
			getLevels() {
				this.$apiPost("/retail/select/srvretail_member_level_select", {
					"serviceName": "srvretail_member_level_select",
					"queryMethod": "select",
					"distinct": false,
					"colNames": ["*"],
					"condition": [{
						"colName": "level_state",
						"ruleType": "eq",
						"value": "可用"
					}],
					"page": {
						"pageNo": 1,
						"rownumber": 220
					}
				}).then(res => {
					this.levels = res.data
					let list = [];
					for (let i in this.levels) {
						list.push(this.levels[i].member_level_name)
						if (this.vipinfo != null) {
							if (this.levels[i].member_level_no == this.vipinfo.member_level_no) {
								this.levelIndex = i
							}
						}
					}
					this.levelList = list;

				})
			},
			switchVipPrice() {
				this.isVipPrice = !this.isVipPrice;
			},
			switchallow_min_sales_price() {
				if (this.allow_min_sales_price == '允许')
					this.allow_min_sales_price = '不允许';
				else
					this.allow_min_sales_price = '允许';
			},
			itemRadioCheck(item, list) {
				for (var i in list) {
					list[i].check = false;
				}
				item.check = true
			},
			itemCheckbox(item) {
				item.check = !(item.check ?? false)
			},
			imgsClick(current, urls) {
				uni.previewImage({
					current,
					urls
				})
			},
			qrcodeClick() {
				let ths = this;
				dsBridge.call("QRCode", {}, function(res) {
					if (res) {
						ths.searchStr = "" + res
						ths.goods_barcode = res

					}
				})
			},
			addImage() { //  事件名称  （自定义） 
				let ths = this;
				dsBridge.call("chooseImage", {
					count: 1, //数量
					sourceType: "", //不填全部 album 从相册选图，camera 使用相机
				}, function(res) {
					let data = JSON.parse(res)
					if (data.file_no) {
						var token = dsBridge.call("getToken");
						if (token == '' || token == undefined) {
							token = uni.getStorageSync("token") ?? ''
						}
						ths.head_images =
							`http://139.196.209.46:4882/file/download?fileNo=${data.file_no}&bx_auth_ticket=${token}`
						ths.head_portrait = data.file_no
					}



					////本地h5 上传失败
					// request.uploadImages(ths.imgs, {
					// 	serviceName: "srv_bxfile_service",
					// 	interfaceName: "add",
					// 	app_no: "retail",
					// 	table_name: "bxretail_goods_info",
					// 	columns: "goods_image"
					// }).then(res => {
					// 	console.log(JSON.stringify(res))
					// 	if (res.statusCode == 200) {
					// 			let data=JSON.parse(res.data)
					// 			ths.imgIds.push(data.file_no)
					// 			alert(data.file_no);  
					// 	} else {
					// 		uni.showToast({
					// 			title: "上传失败",
					// 			icon: 'error'
					// 		})
					// 	}
					// })
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.color999 {
		color: #999 !important;
	}

	.apprightbtn {
		color: rgba(255, 255, 255, 1);
		font-size: 32rpx;
		padding: 0 50rpx;
	}

	.title {
		min-width: 188rpx;
		box-sizing: content-box;
		padding: 28rpx 0 24rpx 24rpx;

		.line1 {
			margin-right: 14rpx;
			width: 0rpx;
			height: 26rpx;
			border: 4rpx solid #38C09E;
			border-radius: 4rpx;
		}

		text {
			color: rgba(16, 16, 16, 1);
			font-size: 32rpx;
			font-weight: 500;
		}

		.show1 {
			margin-left: 12rpx;
			padding: 8rpx 14rpx;
			border-radius: 8rpx 0 0 8rpx;
			background: rgba(56, 192, 158, 1);
			border: 1px solid rgba(56, 192, 158, 1);
			font-size: 24rpx;
			font-weight: 500;
			color: white;
		}

		.hide1 {
			margin-left: 14rpx;
			font-size: 24px;
			font-weight: 500;
			color: white;
			font-size: 24rpx;
			font-weight: 500;
			color: black;
			padding: 8rpx 14rpx;
			border-radius: 8rpx 0 0 8rpx;
			background: rgba(255, 255, 255, 1);
			border: 1px solid rgba(229, 229, 229, 1);
		}

		.show2 {
			padding: 8rpx 14rpx;
			border-radius: 0 8rpx 8rpx 0;
			background: rgba(56, 192, 158, 1);
			border: 1px solid rgba(56, 192, 158, 1);
			font-size: 24rpx;
			font-weight: 500;
			color: white;
		}

		.hide2 {

			font-size: 24px;
			font-weight: 500;
			color: white;
			font-size: 24rpx;
			font-weight: 500;
			color: black;
			padding: 8rpx 14rpx;
			border-radius: 0 8rpx 8rpx 0;
			background: rgba(255, 255, 255, 1);
			border: 1px solid rgba(229, 229, 229, 1);
		}

	}

	.vip-hint {
		height: 76rpx;
		line-height: 76rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: rgba(212, 48, 48, 1);
		margin-left: 26rpx;
	}


	.item-contianer {
		width: 100%;
		background-color: #FFFFFFFF;
		box-sizing: border-box;

		.imgs {
			margin-top: 32rpx;
			margin-right: 24rpx;
			margin-bottom: 22rpx;
			box-sizing: content-box;

			image {
				width: 160rpx;
				height: 160rpx;
				margin-left: 24rpx;
			}
		}

		.item {
			min-height: 100rpx;
			border-bottom: 2rpx solid #F5F5F7;
			padding-right: 28rpx;

			.camera-img {
				width: 68rpx;
				height: 68rpx;
				border-radius: 34rpx;
			}

			.check-box {}

			.title {
				color: rgba(16, 16, 16, 1);
				padding-left: 24rpx;
				padding-top: 24rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);

				.x {
					color: #D43030;
					font-size: 32rpx;
				}
			}

			.mealedit {
				font-size: 30rpx;
				font-weight: 700;
				color: rgba(56, 192, 158, 1);
			}


			.value {
				flex: 1;
				text-align: right;
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);

				image {
					height: 16rpx;
					width: 8rpx;
				}
			}

			.unit {
				color: rgba(16, 16, 16, 1);
				font-size: 28rpx;
			}

			.qrinput {
				flex: 1;
				text-align: right;
				margin-right: 12rpx;
				color: rgba(51, 51, 51, 1);
				font-size: 30rpx;
				font-weight: 700;
			}

			.qrimg {
				width: 64rpx;
				height: 64rpx;

			}

			input {
				flex: 1;
				text-align: right;
				margin-right: 12rpx;
				color: rgba(51, 51, 51, 1);
				font-size: 30rpx;
				font-weight: 500;
			}

			.input1 {
				flex: 1;
				text-align: right;
				margin-right: 12rpx;
				color: rgba(51, 51, 51, 1);
				font-size: 30rpx;
				font-weight: 500;
			}

			.input-hint {
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(153, 153, 153, 1);
			}

  .uni-icon {
        font-family: uniicons;
        font-size: 24px;
        font-weight: normal;
        font-style: normal;
        width: 24px;
        height: 24px;
        line-height: 24px;
        color: #999999;
    }

    .uni-eye-active {
        color: #007AFF;
    }

			.btn {
				padding: 0 8rpx;
				height: 54rpx;
				line-height: 54rpx;
				margin-left: 6rpx;
				border-radius: 12rpx;
				background: rgba(56, 192, 158, 1);
				color: rgba(255, 255, 255, 1);
				font-size: 30rpx;
				font-weight: 500;
				text-align: center;
			}

			.radio-group {
				flex-wrap: wrap;

				.radio {
					min-width: 150rpx;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 10rpx;
					}

					text {
						font-size: 30rpx;
						font-weight: 500;
						color: rgba(51, 51, 51, 1);
					}
				}
			}

			.check-box-group {
				padding-top: 28rpx;
				padding-bottom: 24rpx;

				.check-box1 {

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 10rpx;
					}

					text {
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(102, 102, 102, 1);
					}
				}
			}


		}

		.meal-box {
			padding-bottom: 24rpx;
			padding-right: 24rpx;
			min-height: 202rpx;
			width: 648rpx;
			margin-left: 28rpx;
			border: 2rpx solid rgba(224, 224, 224, 1);

			.empty {
				margin-top: 62rpx;
				margin-left: 138rpx;
				width: 376rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				text-align: center;
				border: 2rpx solid rgba(153, 153, 153, 1);
				font-size: 32rpx;
				font-weight: 700;
				color: rgba(0, 0, 0, 1);
			}

			.value {
				margin-top: 24rpx;
				margin-left: 16rpx;
				/** 文本1 */
				font-size: 28rpx;
				font-weight: 500;
			}
		}

		.item-vip {
			height: 100rpx;
			padding-right: 28rpx;


			.title {
				color: rgba(16, 16, 16, 1);
				padding-left: 24rpx;
				padding-top: 24rpx;
				font-size: 32rpx;
				font-weight: 700;

			}

			.value {
				flex: 1;
				text-align: right;
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}


			input {
				flex: 1;
				text-align: right;
				margin-right: 12rpx;
				color: rgba(51, 51, 51, 1);
				font-size: 30rpx;
				font-weight: 500;
			}

			.input-hint {
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(153, 153, 153, 1);
			}

			.vip-switch {
				width: 100rpx;
				height: 54rpx;
			}


		}

		.vip-price-box {
			margin: 0 28rpx 32rpx 28rpx;
			background-color: rgba(245, 245, 247, 1);
			box-sizing: content-box;
			border-right: 1rpx solid rgba(245, 245, 247, 1);
			border-bottom: 1rpx solid rgba(245, 245, 247, 1);

			.item1 {
				flex: 1;
				padding: 20rpx 0;
				line-height: 40rpx;
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
				background-color: white;
				margin: 1rpx;
			}

			input {
				flex: 1;
				text-align: center;
				color: rgba(51, 51, 51, 1);
				font-size: 30rpx;
				min-height: 80rpx;
				font-weight: 500;
				background-color: white;
				margin: 1rpx;
			}

			.input-hint {
				font-size: 28rpx;
				font-weight: 500;
				padding: 20rpx 0;
				line-height: 40rpx;
				text-align: center;
				color: rgba(153, 153, 153, 1);
			}
		}

	}

	.bottom-btn {
		justify-content: center;
		width: 100%;
		height: 146rpx;
		background: rgba(255, 255, 255, 1);

		.btn {
			width: 320rpx;
			height: 80rpx;
			border-radius: 40px;
			background: rgba(56, 192, 158, 1);
			border: 2px solid rgba(56, 192, 158, 1);
			line-height: 80rpx;
			text-align: center;
			color: white;
		}
	}
</style>
